import React, { Component } from 'react'

export default class Count extends Component {
  constructor() {
    super()
    this.state = { c: 0, msg: 'hello state' } //state是组件的私有数据,并且是组件的状态
  }
  render() {
    // render函数中可以访问this.并且this也一定是组件的实例
    return (
      <div>
        {this.state.msg}
        <div>-</div>
        <p className="test">{this.state.c}</p>
        <div
          onClick={() => {
            // this.setState({
            //   c: this.state.c + 1,
            //   msg: '哈哈哈',
            // })
            // this.setState({
            //   c: this.state.c + 2,
            // })
            // this.setState({
            //   c: this.state.c + 3,
            // })
            // 1. 如果在一个函数中多次连续调用setState,则react会将多个setState合并成一个
            // this.setState({
            //   // c: this.state.c + 1,
            //   msg: '哈哈哈',
            //   // c: this.state.c + 2,
            //   c: this.state.c + 3,
            // })
            //2. setState除了传入对象，也可以传入函数
            // this.setState((state) => {
            //   // 函数是在上一次数据修改完毕之后调用
            //   // state 就是修改之后的最新数据
            //   return {
            //     c: state.c + 1,
            //   }
            // })
            // this.setState((state) => {
            //   // 函数是在上一次数据修改完毕之后调用
            //   // state 就是修改之后的最新数据
            //   return {
            //     c: state.c + 2,
            //   }
            // })
            // this.setState((state) => {
            //   // 函数是在上一次数据修改完毕之后调用
            //   // state 就是修改之后的最新数据
            //   return {
            //     c: state.c + 3,
            //   }
            // })
            // 3. setState可以传入两个参数
            // 第一个参数可以是一个对象，也可以是一个函数
            // 第二个参数必须传入函数.第二个是当数据修改完毕,已经页面更新完毕才会触发
            this.setState(
              {
                c: this.state.c + 1,
              },
              () => {
                // 当这个函数执行的时候,表示数据更新完毕,以及页面更新完毕
                console.log(this.state.c)
                console.log(
                  document.getElementsByClassName('test')[0].innerText
                )
              }
            )
          }}
        >
          +
        </div>
      </div>
    )
  }
}
